<template>
  <div class="container">
    <div class="main-container">
      <div class="main-header-content">
        <div class="title">组织机构图</div>

        <div class="main-header-right">
          <el-upload
            :on-success="upFileSuccess"
            class="upload-demo"
            action="/api/upload"
            multiple
            :limit="limit"
            :on-error="fileError"
            :show-file-list="false"
          >
            <!-- :limit="1" -->
            <el-button type="primary">上传证书</el-button>
          </el-upload>
        </div>
      </div>
      <div class="main-table-content">
        <div style="width: 100%; text-align: center">
          <img style="width: 50%" :src="fileUrl" />
          <el-empty description="暂无数据" v-show="fileUrl == null"> </el-empty>
        </div>
        <div style="text-align: center">
          <el-button type="primary" size="large" @click="downLoad"
            >导出组织机构图</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { Notification } from "element-ui"
import { getOrganizational, updateOrganizational } from "@/api/enterprise"
const fileUrl = ref("api/uploads/default.jpg")
const fileName = ref("default")
const limit = ref(1)
const downLoad = () => {
  const link = document.createElement("a")
  link.href = fileUrl.value
  link.download = fileName.value // 这里可以设置下载后的文件名
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}
onMounted(async () => {
  let result = await getOrganizational()
  fileName.value = result.data[0]
  fileUrl.value = result.data[1]
  console.log(result)
})

const fileError = () => {
  Notification({
    title: "失败",
    message: "上传失败",
    type: "warning",
  })
} // 安全责任书移除
const upFileSuccess = async (res) => {
  if (res.code == 0) {
    let result = await updateOrganizational(res.data[1], "/api/" + res.data[0])
    if (result.code == 0) {
      fileName.value = res.data[1]
      fileUrl.value = "/api/" + res.data[0]
      Notification({
        title: "成功",
        message: "上传成功",
        type: "success",
      })
    } else {
      Notification({
        title: "失败",
        message: result.msg,
        type: "warning",
      })
    }
  } else {
    Notification({
      title: "失败",
      message: "上传失败",
      type: "warning",
    })
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  overflow: hidden;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.header-container {
  background-color: #fff;
  padding: 12px 15px;
  border: solid 1px #e6e6e6;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  border-radius: 4px;
  flex-shrink: 0;
  flex-grow: 0;
}

.header-right-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  flex: 1;
  width: 0;
  margin-left: 20px;
}

.else-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.item-filter-width {
  width: 254px;
}

::v-deep .el-input--small .el-input__inner {
  line-height: 33px;
}

// ::v-deep .el-radio-button__inner:hover {
//   color: #6c8e38;
// }

// ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
//   color: #fff;
//   background-color: #82a848;
//   border-color: #82a848;
//   box-shadow: -1px 0 0 0 #82a848;
// }

// ::v-deep .el-range-editor.is-active,
// .el-range-editor.is-active:hover,
// .el-select .el-input.is-focus .el-input__inner {
//   border-color: #82a848 !important;
// }

// ::v-deep .el-select .el-input.is-focus .el-input__inner {
//   border-color: #82a848 !important;
// }

// ::v-deep .el-select .el-input__inner:focus {
//   border-color: #82a848 !important;
// }

// ::v-deep .el-select-dropdown__item .selected {
//   color: #82a848 !important;
// }

// ::v-deep .el-button--success {
//   background-color: #82a848;
//   border-color: #82a848;
// }

.main-container {
  flex: 1;
  height: 0;
  background-color: #fff;
  padding: 12px 15px;
  border: solid 1px #e6e6e6;
  box-sizing: border-box;
  margin-top: 10px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

.main-header-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  flex-grow: 0;
  margin-bottom: 12px;

  .title {
    position: relative;
    font-weight: bold;
    color: #333;
    font-size: 15px;
    padding-left: 16px;

    &::after {
      content: "";
      width: 3px;
      height: 16px;
      background-color: #82a848;
      left: 0;
      top: calc(50% - 8px);
      position: absolute;
    }

    &::before {
      content: "";
      width: 3px;
      height: 16px;
      background-color: #82a848;
      left: 5px;
      top: calc(50% - 8px);
      position: absolute;
    }
  }

  .main-header-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
}

.main-table-content {
  flex: 1;
  height: 0;
}

.shoot-place-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
</style>
